﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site_Usuario.Master" Inherits="System.Web.Mvc.ViewPage<Proyecto_e.Models.pregunta>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Create
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<body onload="iniciar()">
<script  type="text/javascript">
    var miTabla = 'tabla'; // poner aquí el id de la tabla que queremos editar
    var bandera = false;
    function iniciar() {


        document.getElementById('id_tipo_pregunta').value = '<%= ViewData["id_tipo_pregunta"] %>';
        document.getElementById('enunciado').value = '<%= ViewData["enunciado"] %>';
        iniciarTabla2();        
        document.getElementById('tabla').style.display = 'none';       
        
    }

    // preparar la tabla para edición
    function iniciarTabla2() {        
        tab = document.getElementById(miTabla);
        filas = tab.getElementsByTagName('tr');
        for (i = 1; fil = filas[i]; i++) {
            celdas = fil.getElementsByTagName('td');
            for (j = 1; cel = celdas[j]; j++) {
                if (i > 0 && j == celdas.length - 1) continue; // La última columna  no se puede editar
                cel.onclick = function () { crearInput(this) }
            } // end for j 
        } //end for i

        // añadir funcion onclick a las imágenes para borrar y añadir y ocultar las imágenes de borrar
        for (i = 0; im = document.images[i]; i++)
            if (im.alt == 'nueva fila')
                im.onclick = function () { anadir(this, 0) }
            else if (im.alt == 'borrar fila') {
                im.onclick = function () { borrar(this, 0) }
            }
            enumerar();
            respuestas();
    } // end function

    function nueva() {      
        tab = document.getElementById(miTabla);
        filas = tab.getElementsByTagName('tr');
        anadir2(filas[filas.length - 1], 0);

    }

    function nueva2(value) {      
        tab = document.getElementById(miTabla);
        filas = tab.getElementsByTagName('tr');
        anadir3(filas[filas.length - 1], 0,value);

    }

    function borrarPrimera() {
        if (bandera == false) {
            tab = document.getElementById(miTabla);
            filas = tab.getElementsByTagName('tr');
            if (filas.length == 3) {
                im = document.images[1];
                borrar2(im, 0);              
                bandera = true;
            }
        }       
    }

    // crear input para editar datos
    function enumerar() {
        tab = document.getElementById(miTabla);
        filas = tab.getElementsByTagName('tr');
        for (i = 1; fil = filas[i]; i++) {
            celdas = fil.getElementsByTagName('td');
            celdas[0].innerHTML = i;
        }
    }

    function crearInput(celda) {
        celda.onclick = function () { return false }
        txt = celda.innerHTML;
        celda.innerHTML = '';
        obj = celda.appendChild(document.createElement('input'));
        obj.value = txt;
        obj.focus();
        obj.onblur = function () {
            txt = this.value;
            celda.removeChild(obj);
            celda.innerHTML = txt;
            celda.onclick = function () { crearInput(celda) }
        }
        respuestas();
    }
    // añadir filas 
    function anadir(obj, num) {
        if (num == 0) { // añadir filas
            fila = obj.parentNode.parentNode;
            nuevaFila = fila.cloneNode(true);
            celdas = fila.getElementsByTagName('td');
            celdas[1].innerHTML = "";
            im = nuevaFila.getElementsByTagName('img');
            im[0].onclick = function () { anadir(this, 0) }
            im[1].onclick = function () { borrar(this, 0) }
            for (i = 2, tot = nuevaFila.getElementsByTagName('td').length - 1; i < tot; i++) {
                nuevaFila.getElementsByTagName('td')[i].onclick = function () { crearInput(this) };
                nuevaFila.getElementsByTagName('td')[i].innerHTML = 0;
            }
            fila.parentNode.insertBefore(nuevaFila, fila);
        }
        mostrarImagenes();
        iniciarTabla2();
        document.getElementById('respuesta').value = "";
    }

    function anadir2(obj, num) {
        document.getElementById('tabla').style.display = 'block';       
        if (num == 0) { // añadir filas
            fila = obj;
            nuevaFila = fila.cloneNode(true);
            celdas = fila.getElementsByTagName('td');
            celdas[1].innerHTML = document.getElementById("respuesta").value;
            im = nuevaFila.getElementsByTagName('img');
            im[0].onclick = function () { anadir(this, 0) }
            im[1].onclick = function () { borrar(this, 0) }
            for (i = 2, tot = nuevaFila.getElementsByTagName('td').length - 1; i < tot; i++) {
                nuevaFila.getElementsByTagName('td')[i].onclick = function () { crearInput(this) };
                nuevaFila.getElementsByTagName('td')[i].innerHTML = 0;
            }
            fila.parentNode.insertBefore(nuevaFila, fila);
        }            
        mostrarImagenes();        
        document.getElementById('respuesta').value = "";
        borrarPrimera();
        iniciarTabla2();
    }

     function anadir3(obj, num, value) {
        document.getElementById('tabla').style.display = 'block';       
        if (num == 0) { // añadir filas
            fila = obj;
            nuevaFila = fila.cloneNode(true);
            celdas = fila.getElementsByTagName('td');
            celdas[1].innerHTML = value;
            im = nuevaFila.getElementsByTagName('img');
            im[0].onclick = function () { anadir(this, 0) }
            im[1].onclick = function () { borrar(this, 0) }
            for (i = 2, tot = nuevaFila.getElementsByTagName('td').length - 1; i < tot; i++) {
                nuevaFila.getElementsByTagName('td')[i].onclick = function () { crearInput(this) };
                nuevaFila.getElementsByTagName('td')[i].innerHTML = 0;
            }
            fila.parentNode.insertBefore(nuevaFila, fila);
        }            
        mostrarImagenes();        
        document.getElementById('respuesta').value = "";
        borrarPrimera();
        iniciarTabla2();
    }

    // borrar filas 
    function borrar(obj, num) {
        if (num == 0) { // borrar filas
            tab = obj.parentNode.parentNode.parentNode;
            tab.removeChild(obj.parentNode.parentNode);
        } // end borrar filas
        mostrarImagenes();
        iniciarTabla2();
        num_filas();
    }

    function borrar2(obj, num) {
        if (num == 0) { // borrar filas
            tab = obj.parentNode.parentNode.parentNode;
            tab.removeChild(obj.parentNode.parentNode);
        } // end borrar filas        
    }

    // mostrar/ocultar imagenes para borrar
    function mostrarImagenes() {
        tab = document.getElementById(miTabla);
        filas = tab.getElementsByTagName('tr');
        columnas = filas[0].getElementsByTagName('td');
        numFilas = filas.length;
        numColumnas = columnas.length;
        for (i = 0; im = tab.getElementsByTagName('img')[i]; i++)
            if (im.alt == 'borrar fila')
                im.style.visibility = (numFilas > 1) ? 'visible' : 'hidden';
            else if (im.alt == 'borrar columna')
                im.style.visibility = (numColumnas > 1) ? 'visible' : 'hidden';
        }

        function respuestas() {
            var respuestas='';
            tab = document.getElementById(miTabla);
            filas = tab.getElementsByTagName('tr');
            for (i = 1; fil = filas[i]; i++) {
                celdas = fil.getElementsByTagName('td');
                cel = celdas[1];
                respuestas = respuestas + cel.innerHTML+',';
            }
           
            document.getElementById('respuestas').value = respuestas;
        }

        function num_filas() {
            tab = document.getElementById(miTabla);
            filas = tab.getElementsByTagName('tr');
            fil = filas[1];
            celdas = fil.getElementsByTagName('td');
            cel = celdas[1];

            if ((filas.length > 2) )
                document.getElementById('tabla').style.display = 'block';
            else if (cel.innerHTML!='')
                document.getElementById('tabla').style.display = 'block';
            else
                document.getElementById('tabla').style.display = 'none';
        }

        function id_tipo_pregunta_onclick() {
            if (document.getElementById('id_tipo_pregunta').value == 'Respuesta abierta') {
                document.getElementById('tabla').style.display = 'none';
                document.getElementById('OK').style.display = 'none';
                document.getElementById('divresp').style.display = 'none';
                document.getElementById('divresp2').style.display = 'none';
                document.getElementById('divresp3').style.display = 'none';
            }
            else {
                num_filas();
                document.getElementById('OK').style.display = 'block';
                document.getElementById('divresp').style.display = 'block';
                document.getElementById('divresp2').style.display = 'block';
                document.getElementById('divresp3').style.display = 'block';
                }
        }

</script>

<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script> 
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>



<% using (Html.BeginForm("guardar", "Pregunta", FormMethod.Post))
   { %>

     <form name="form1" id="form1" method="post" runat="server" action="Pregunta/guardar">
             <input  type="hidden" id="respuestas" name="respuestas"  />
    <div style="text-align: left">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="">&nbsp;Inicio</asp:HyperLink>&nbsp;>> 
        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="/Encuesta/Create">&nbsp;Nueva Encuesta</asp:HyperLink>
        <span style="color: #000000"><strong style="text-align: center">&nbsp;&nbsp;</strong><span 
            style="text-align: center; font-size: small">&gt;&gt; Nueva Pregunta</span><strong 
            style="text-align: center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
        <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Nueva pregunta</strong></span>
        
        
        <br style="color: #000000" />
        <br style="color: #000000" />
        <span style="color: #000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        Seleccione el tipo de pregunta:
        <select id="id_tipo_pregunta" name="id_tipo_pregunta" onclick="return id_tipo_pregunta_onclick()">
            <option  selected="selected" value="Respuesta única"> Respuesta &uacute;nica </option>
            <option value="Múltiple respuesta" > M&uacute;ltiple respuesta</option>
            <option value="Respuesta desplegable"> Respuesta desplegable</option>
            <option value="Respuesta abierta"> Respuesta abierta</option>
        </select><br />
        <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Enunciado de la pregunta:&nbsp;&nbsp;
        </span>
        <textarea id="enunciado"  name="enunciado" rows="1" style="color: #000000" cols="50" ></textarea>
        <div style="text-align: left" id="divresp3">
        <span style="color: #000000">
        <br />
        <br />        
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Respuestas</span><br />
        <br />
        </div>
        <table id="tabla" name="tabla" align="center" >
        <tr class="cabeza">
        <td class="orden">No</td><td style="width: 409px">Respuesta</td><td>Acciones</td>
        </tr>
        <tr>
        <td class="orden">1</td><td style="width: 409px"> </td><td class="orden">&nbsp;<img src="/Content/images/anadir.gif" alt="nueva fila" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="/Content/images/menos.gif" alt="borrar fila" /> </td>
        </tr>        
        </table>
        <div style="text-align: left" id="divresp">
            <span style="color: #000000">
            <br />
            <br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <strong style="text-align: left">Nueva Respuesta<br />
            <br />
            </strong></span></div><div style="text-align: left" id="divresp2">
             <span style="color: #000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Respuesta:&nbsp;&nbsp;&nbsp; </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <textarea id="respuesta" name="respuesta" rows="2" cols="50"></textarea>&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="Ok" type="button" value="Ok" name="OK" onclick="nueva()"
                 style="width: 34px"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
        <br />
       </div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<asp:Button ID="Button4" runat="server" PostBackUrl="/Encuesta/create" Text="Cancelar" />
        &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
        <input id="Button2" type="submit" value="Guardar" /></div>

    </form>
<% } %>
</body>
</asp:Content>
